<template>
  <div>
    <h2>测试pinia 以及持久化功能</h2>
    <h3>测试国际化实现</h3>
    <a-select ref="select" v-model:value="value1" style="width: 120px" :options="options1" @change="handleChange"></a-select>
    <h3>第一种写法测试</h3>
    <p>当前计数器值为：{{ counterStore.count }} 双倍值为：{{ counterStore.doubleCount }} 解构后的值:{{ count }}</p>
    <button @click="counterStore.increment">+1</button>
    <button @click="counterStore.decrement">-1</button>
    <h3>第二种写法测试</h3>
    <p>当前计数器值为：{{ counterStoreSet.num }} 双倍值为：{{ counterStoreSet.getDbNum }}</p>
    <button @click="counterStoreSet.add">+1</button>
    <button @click="counterStoreSet.minus">-1</button>
    <h3>测试登录 接口调用</h3>
    <button @click="loginTest">登录</button>
    <h3>测试antdv</h3>
    <a-button type="primary">Primary Button</a-button>
    <a-button>Default Button</a-button>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/store/useCounter'
import { useCounterStoreSet } from '@/store/useCounterSet'
import { storeToRefs } from 'pinia'
import { apis } from '@/services'
import type { SelectProps } from 'ant-design-vue'
import { ref } from 'vue'
import { SelectValue } from 'ant-design-vue/es/select'
// ps 非必要结构 会丢失响应式 或者采用以下方式
const counterStore = useCounterStore()
const { count } = storeToRefs(counterStore) // 解构处理
const counterStoreSet = useCounterStoreSet()

const loginTest = async () => {
  const res = await apis.loginAPI.DefaultApi.userInfoLoginUsingPost({ username: '13479636407', password: '13479636407', identityType: 1 })
  console.log(res)
}

// 国际化实现
const value1 = ref('zh-cn')
const options1 = ref<SelectProps['options']>([
  {
    value: 'zh-cn',
    label: '中文'
  },
  {
    value: 'en-us',
    label: '英文'
  }
])

const handleChange = (value: SelectValue) => {
  console.log(`selected ${value}`)
}
</script>

<style scoped></style>
